<script setup lang="ts">
import { reactive, watchEffect } from 'vue';
import AppHeader from 'comps/@lgs/AppHeader/AppHeader.vue';
import NoData from '@/components/@lgs/NoData/NoData.vue';
import { api } from "@/api/apiServer";
import Tools from '@likg/tools';

// -- props
interface TabProps extends API.ListProps<any[] | null> {
  queryFriendType: number; // 类型 1, 领取记录 2, 消费记录
}

interface StateProps {
  friendsDirect: TabProps;
  friendsIndirect: TabProps;
  active: number;
}

type TabKeyType = 'friendsDirect' | 'friendsIndirect';

// -- state
const state = reactive<StateProps>({
  friendsDirect: {
    page: 1,
    data: null,
    isRefreshing: false,
    isLoading: false,
    isFinished: false,
    type: 'refresh',
    queryFriendType: 1,
  },
  friendsIndirect: {
    page: 1,
    data: null,
    isRefreshing: false,
    isLoading: false,
    isFinished: false,
    type: 'refresh',
    queryFriendType: 2,
  },
  active: 0,
});

// -- constants
// 1. 微信环境 无导航栏
// 2. 非微信环境 有导航栏
const env = Tools.getEnv();
const showStatusBar = false;

// -- methods
const getDataSource = async (key: TabKeyType) => {
  try {
    let ajaxApi = key === 'friendsDirect' ? api.getPointsList : api.getCouponList;
    const resp = await ajaxApi({
      pageNum: state[key].page,
      pageSize: 10,
      pointType: 2
    });
    const { current, total, records } = resp.data;
    // 处理数据
    if (state[key].type === 'refresh' || state[key].data === null) {
      state[key].data = records;
      state[key].isRefreshing = false;
    } else {
      state[key].data = [...state[key].data!, ...records];
      state[key].isLoading = false;
    }
    state[key].isFinished = (state[key].data as any).length >= total;
  } catch (error) {
    console.log(error);
  }
};

// -- events
const onRefresh = (key: TabKeyType) => {
  state[key].page = 1;
  state[key].type = 'refresh';
  getDataSource(key);
};
const onLoad = (key: TabKeyType) => {
  state[key].page += 1;
  state[key].type = 'load';
  getDataSource(key);
};

// -- watchEffects
watchEffect(() => {
  switch (state.active) {
    case 0:
      state['friendsDirect'].data === null && getDataSource('friendsDirect');
      break;
    case 1:
      state['friendsIndirect'].data === null &&
        getDataSource('friendsIndirect');
      break;
  }
});
</script>

<template>
  <div class="page">
    <!-- 导航栏 -->
    <app-header v-if="env !== 'weixin'" title="消息明细" :showBack="true" :show-status-bar="showStatusBar" />
    <!-- 内容 -->
    <van-tabs v-model:active="state.active" color="#ff5e33" swipeable>
      <van-tab title="抵扣金领取记录">
        <van-pull-refresh v-model="state.friendsDirect.isRefreshing" @refresh="onRefresh('friendsDirect')">
          <template v-if="state.friendsDirect.data">
            <van-list v-model:loading="state.friendsDirect.isLoading" finished-text=""
              :finished="state.friendsDirect.isFinished" :offset="50" :immediate-check="false"
              @load="onLoad('friendsDirect')" style="margin-top:10px">
              <template v-if="state.friendsDirect.data.length > 0">
                <div class="item border-bottom px-15 py-20" style="border-color: #97979720;"
                  v-for="(item, index) in state.friendsDirect.data" :key="index" :data="item">
                  <div>
                    <div class="f15 f-500 mr-14 lh-20" style="color: #070707">
                      卡券详情
                    </div>
                    <div class="f14 mt-11" style="color: #7F8086">
                      有效期至：{{ item.expireEndTime }}
                    </div>
                  </div>
                  <div class="f14 ff-DIN-Regular" style="color: #F59A23">{{ item.pointFaceValue }}</div>
                </div>
              </template>
              <no-data v-else />
            </van-list>
          </template>
          <van-loading v-else color="#FF5E33" vertical>加载中...</van-loading>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="抵扣金消费记录">
        <van-pull-refresh v-model="state.friendsIndirect.isRefreshing" @refresh="onRefresh('friendsIndirect')">
          <template v-if="state.friendsIndirect.data">
            <van-list v-model:loading="state.friendsIndirect.isLoading" finished-text=""
              :finished="state.friendsIndirect.isFinished" :offset="50" :immediate-check="false"
              @load="onLoad('friendsIndirect')">
              <template v-if="state.friendsIndirect.data.length > 0">
                <div class="item border-bottom px-15 py-20" style="border-color: #97979720;"
                  v-for="(item, index) in state.friendsIndirect.data" :key="index" :data="item">
                  <div>
                    <div class="f15 f-500 mr-14 lh-20" style="color: #070707">
                      卡券详情
                    </div>
                    <div class="f14 mt-11" style="color: #7F8086">
                      有效期至：{{ item.expireEndTime }}
                    </div>
                  </div>
                  <div class="f14 ff-DIN-Regular" style="color: #F59A23">{{ item.pointFaceValue }}</div>
                </div>
              </template>
              <no-data v-else />
            </van-list>
          </template>
          <van-loading v-else color="#FF5E33" vertical>加载中...</van-loading>
          <template #loading></template>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="less" scoped>
:deep(.van-tabs__wrap) {
  height: 50px;
  position: fixed;
  left: 0;
  z-index: 999;
  width: 100%;
}

:deep(.van-tabs__content) {
  margin-top: 50px;
}

.van-loading {
  margin-top: 120px;
}
</style>
